<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3d Dragging Test Page</title>
<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<script type="text/javascript" src="../ui.draggable.ext.js"></script>


<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

.draggable {
	position: absolute;
	width: 10px;
	height: 10px;
	top: 100px;
	left: 100px;
	padding: 5px;	
}

/* Shadow ~Sean */
.uiShadow, .example, .uiShadow1, .uiShadow2, .uiShadow3, .uiShadow4 { width:180px; height:80px; }
.uiShadow { position:relative; margin:0 auto; opacity:1; background:transparent!important; }
.uiShadow1, .uiShadow2, .uiShadow3, .uiShadow4 { background:#000; position:absolute; top:0; left:0; }
.uiShadow1 { opacity:0.25; top:3px; left:3px; width:181px; height:81px; }
.uiShadow2 { opacity:0.20; top:4px; left:5px; height:79px; }
.uiShadow3 { opacity:0.20; top:5px; left:4px; width:179px; }
.uiShadow4 { opacity:0.30; top:5px; left:5px; width:178px; height:78px; }

</style>
</head>
<body class="flora">
	<fieldset style='height: 500px;'>
	<legend>3D Dragging</legend>

	    	Demo
	    	<div id="demo1" class='draggable'>
	    	<div class="original" style='width: 180px; height: 80px; background: green; z-index: 2; position: absolute; top: 0px; left: 0px;'></div>
	    	<div class="shadow" style='width: 180px; height: 80px; background: black; opacity: 0.3; z-index: 1; position: absolute; top: 0px; left: 0px;'></div>	
	    	</div>
	</fieldset>


<script type="text/javascript">
$(document).ready(function(){
//Add Shadow ~Sean
$(".shadow").addClass("uiShadow")
.append('<div class="uiShadow1"></div>')
.append('<div class="uiShadow2"></div>')
.append('<div class="uiShadow3"></div>')
.append('<div class="uiShadow4"></div>');

	var maxTop = 20;
	var maxLeft = 20;
	
	$('#demo1').draggable({
	 start: function(e,ui) {

 	 		var that = ui.draggable;
 	 		var w = $(window).width();
 	 		var h = $(window).height();
 	 		var l = ((that.rpos[0] + this.offsetWidth/2) - w/2) / w;
 	 		var t = ((that.rpos[1] + this.offsetHeight/2) - h/2) / h;

	 		that.isBeingAnimated = true;
	 		$(".original",this).animate({ top: -t * maxTop*2, left: -l * maxLeft*2 }, 500, function() {
	 			that.isBeingAnimated = false;	
	 		});
	 		
	 		$(".shadow",this).animate({ top: t * maxTop*2, left: l * maxLeft*2 }, 500, function() {
	 			that.isBeingAnimated = false;	
	 		});
	 		
 	 },
 	 stop: function(e,ui) {
	
 	 		$(".original",this).animate({ top: 0, left: 0 }, 500);
 	 		$(".shadow",this).animate({ top: 0, left: 0 }, 500);
 	 },
 	 drag: function(e,ui) {

 	 		var that = ui.draggable;
 	 		if(that.isBeingAnimated) return false;
 	 		
 	 		var w = $(window).width();
 	 		var h = $(window).height();
 	 		var l = ((that.rpos[0] + this.offsetWidth/2) - w/2) / w;
 	 		var t = ((that.rpos[1] + this.offsetHeight/2) - h/2) / h;
 	 		
 	 		$(".original",this).css({
 	 			left: -l * maxLeft*2,
 	 			top:  -t * maxTop*2	
 	 		});
 	 		
  	 		$(".shadow",this).css({
 	 			left: l * maxLeft*2,
 	 			top:  t * maxTop*2	
 	 		});	

 	 }
	});

});
</script>

</body>
</html>

